<template>
  <view>
    <u-navbar
        title="系统通知"
        placeholder
        titleStyle="color:black"
        leftIconColor="#000"
        auto-back
    >
    </u-navbar>
    <view class="page-wrap">

      <view class="card-list" v-for="(item,index) in msgList" :key="index" v-if="msgList.length != 0"
            @click="handleMsgDetail(item)">
        <view class="titme_box">{{ item.create_time }}</view>
        <view class="card-list-item" :style="{background: item.is_read === 0 ? '#DBEDFF' : '#ffffff'}">
          <view class="waiguo_box">
            <view class="title_box">
              <view class="item-name">{{ item.title }}</view>
              <view class="kahao">{{ item.description }}</view>
            </view>
          </view>
        </view>
      </view>

    </view>

    <u-popup :show="show" mode="center" :round="10" width="80%" closeable @close="closeNotice(msgDetail.id)">
      <view class="popup_box">
        <view class="title_text">{{ msgDetail.title }}</view>
        <!--        <u-parse :content="msgDetail.contents"></u-parse>-->
        <scroll-view scroll-y class="notice_content">
          <u-parse :content="msgDetail.contents"></u-parse>
        </scroll-view>
      </view>
    </u-popup>

  </view>
</template>
<script setup>
import {ref} from "vue";
import {onShow} from "@dcloudio/uni-app";
import {dealReadAPI, getNoticeAPI} from "../../services";

const msgList = ref([])
const mingxiData = ref()
const show = ref(false)

const msgDetail = ref({
  title: '',
  description: ''
})

onShow(async () => {
  await getNoticeList()
})
// 获取系统消息列表
const getNoticeList = async () => {
  const res = await getNoticeAPI()
  // console.log('消息列表', res.result)
  msgList.value = res.result
  mingxiData.value = res.result[0]
}
const handleMsgDetail = function (item) {
  // 调用已阅读接口
  if (item.is_read === 0){
    dealReadAPI(item.id)
  }
  msgDetail.value = item
  show.value = true
}
const closeNotice = (id) => {
  // console.log('关闭消息', id)
  show.value = false
  getNoticeList()
}
</script>
<style>
page {
  background-color: #F6F6F6;
}
</style>
<style lang="scss" scoped>
page {
  background-color: #F6F6F6;
}

.u-status-bar,
.u-navbar__content {
  background-image: linear-gradient(90deg, #FECE37, #FECE37);
}

.popup_box {
  box-sizing: border-box;
  padding: 80rpx 50rpx 50rpx 50rpx;
  max-height: 400px;
  width: 660rpx;
  overflow-x: auto;

  .title_text {
    font-size: 32rpx;
    color: #333;
    font-weight: bold;
    text-align: center;
    line-height: 30px;
    margin-bottom: 40rpx;
  }

  .content_text {
    font-size: 28rpx;
    color: #666;
    text-indent: 2em;
    line-height: 25px;
  }
}

.page-wrap {
  padding: 30rpx;

  .card-list {
    .titme_box {
      background-color: #E8E8E8;
      text-align: center;
      width: 320rpx;
      color: #666666;
      padding: 10rpx;
      font-size: 26rpx;
      border-radius: 200rpx;
      margin: 0 auto 30rpx;
    }

    .card-list-item {
      background-color: #ffffff;
      padding: 30rpx;
      border-radius: 20rpx;

      margin-bottom: 30rpx;

      .waiguo_box {
        display: flex;
        align-items: center;

        .icon_Box {
          margin-right: 14rpx;
          position: relative;

          .left-icon {
            width: 100rpx;
            height: 100rpx;
          }

          .hogdian {
            position: absolute;
            top: 0;
            right: 0;
            background-color: #f00;
            color: #ffffff;
            width: 36rpx;
            height: 36rpx;
            line-height: 36rpx;
            border-radius: 200rpx;
            text-align: center;
            font-size: 26rpx;
          }
        }


        .kahao {
          color: #9499ad;
          word-break: break-all;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }

        .title_box {
          flex: 1;
          padding-left: 14rpx;

          .item-name {
            font-size: 32rpx;
            margin-bottom: 8rpx;
            font-weight: bold;
            display: flex;
            align-items: center;

            span {
              font-size: 28rpx;
              font-weight: initial;
              margin-left: auto;
              color: #9499ad;
            }
          }
        }
      }


    }
  }
}
</style>
